<template>
  <div>
    <a-modal title="新增Case" @ok="handleOk" @cancel="handleCancel" v-model="modalVisible" width="50%">
      <a-form :layout="formLayout" :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="case信息" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" props="caseInfo">
              <a-input
                placeholder="请输入case信息/case名称"
                v-decorator="['caseInfo', { rules: [{ required: true, message: 'case信息不能为空!' }] }]"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="投产日期" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-date-picker
                placeholder="请选择投产日期"
                v-decorator="['operationDate', { rules: [{ required: true, message: '请选择投产日期!' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="case描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }">
              <a-textarea placeholder="请输入case描述" :rows="6" v-decorator="['caseDescription']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="case类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
          <a-radio-group
            v-decorator="['caseType', { rules: [{ required: true, message: '请选择一个case类型!' }] }]"
            @change="radioChange"
          >
            <a-radio v-for="(caseType, index) in caseTypeList" :key="index + 1" :value="index + 1">{{
              caseType.typeName
            }}</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div class="action-demo" v-show="actionVisible">
        <a-button type="primary" icon="download" @click="download">下载模板</a-button>
        <a-upload
          class="upload-demo"
          :before-upload="checkUpload"
          :customRequest="uploadCase"
          :multiple="false"
          :showUploadList="false"
        >
          <a-button type="primary" icon="upload">导入case需求</a-button>
        </a-upload>
      </div>
    </a-modal>
    <case-import-modal
      :info="caseImportInfo"
      :showModal="caseImportModal"
      @cancel="oncancel"
      @ok="onok"
    ></case-import-modal>
  </div>
</template>

<script>
import { downloadModule } from '@api/pf_bank/common/common'
import { uploadCase, addCase } from '@api/pf_bank/case/case'
import CaseImportModal from './CaseImportModal.vue'
import { getStore } from '@/utils/storage'
import moment from 'moment'
export default {
  name: 'caseCreateModal',
  components: {
    CaseImportModal
  },
  props: {
    showModal: {
      type: Boolean
    },
    caseType: {
      type: Array
    },
    getCaseList: {
      type: Function
    }
  },
  data() {
    return {
      caseBody: {},
      caseImportModal: false,
      caseImportInfo: {},
      actionVisible: false,
      form: this.$form.createForm(this, { name: 'caseCreateForm' }),
      formLayout: 'horizontal',
      modalVisible: this.showModal,
      caseTypeList: this.caseType
    }
  },
  watch: {
    showModal(newVal, oldVal) {
      this.modalVisible = newVal
    },
    caseType(newVal, oldVal) {
      this.caseTypeList = newVal
    }
  },
  methods: {
    radioChange(e) {
      if (e.target.value == 1 || e.target.value == 4 || e.target.value == 5) {
        this.actionVisible = true
      } else {
        this.actionVisible = false
      }
    },

    //创建case方法
    handleOk() {
      if (JSON.stringify(this.caseBody) == '{}') {
        this.$message.error('请先导入case需求')
      } else {
        this.form.validateFields((err, values) => {
          if (!err) {
            values.operationDate = moment(values.operationDate).format('YYYY-MM-DD')
            //此处提交表单
            addCase(values, this.caseBody, getStore('pro__Login_Username').value).then(res => {
              if (res.code == 200) {
                this.$message.success('case创建成功!')
              } else {
                this.$message.error('case创建失败!')
              }
            })
            //重置表单元素，清空子组件返回的对象
            this.caseBody = {}
            this.form.resetFields()
            this.$emit('ok', false)
          }
        })
      }
    },

    handleCancel() {
      this.form.resetFields()
      this.caseBody = {}
      this.$emit('cancel', false)
    },

    download() {
      let index = this.form.getFieldValue('caseType') - 1
      let filename = 'SPDB-HDS-需求调研评估表(' + this.caseTypeList[index].typeName + ').xlsx'
      downloadModule(filename).then(res => {
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel' //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = filename
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    },

    //上传模板前的beforeUpload方法，用于防止用户上传非excel文件
    checkUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      let isXlsxOrXls = fileName === 'xlsx' || fileName === 'xls'
      if (!isXlsxOrXls) {
        this.$message.error('只允许上传xlsx或xls类型文件')
      } else {
      }
      return isXlsxOrXls
    },

    uploadCase(info) {
      this.form.validateFields((err, value) => {
        if (!err) {
          let hide = this.$message.loading('导入中...')
          let formData = new FormData()
          formData.append('file', info.file)
          uploadCase(formData).then(res => {
            hide()
            this.caseImportInfo = res.result
            this.caseImportModal = true
          })
        }
      })
    },

    //子组件点取消
    oncancel(data) {
      this.caseImportModal = data
    },

    //子组件点确定
    onok(data) {
      this.caseImportModal = false
      this.caseBody = data
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.upload-demo {
  display: inline-block;
  margin-left: 32px;
}
.action-demo {
  margin-left: 50px;
  margin-bottom: 12px;
}
</style>
